<!DOCTYPE html>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../resources/css/pay.css" rel="stylesheet">
<link href="../../resources/css/counter.css?v=1" rel="stylesheet">
<title>友金所-认证支付</title>
<style>
	.pc-site .form_item.code .form_label {
		text-align: left;
	}
	.pc-site .form_item.code.item_phone{
		padding-bottom: 0px;line-height: 40px;
	}
	.pc-site .form_item.code.item_verify{
		line-height: 40px;
	}
	.pc-site .form_item.code input{
		width: 260px;
	}
	.pc-site .form_item.code .form_label label{
		color:#ff2830;
	}
	.pc-site #btnPurchase{
		margin-left: 0;
	}
	.pc-site input#phone{
		margin-top: 4px;
	}
	.pc-site input.item_text{
		padding-left: 4px;
	}
	.mobile-site .form_item.code{
		border-bottom: 1px solid #e6e6e6;
	}
</style>
</head>
<body>
	
	<div class="pc-header">
		<!-- logo导航栏-->
		<div class="header_nav">
			<div class="header_nav-ctn">
				<div class="logo">
					<img class="logo-img" src="../../resources/images/yyfax-logo.png">
					<span class="logo-text">认证支付(${paymentName})</span>
				</div>
			</div>
		</div>
		<!-- logo导航栏-->
	</div>
	<div class="yy-navbar ng-scope">
		<div class="navbar-row">
			<div class="navbar-left">
				<a class="btn-back" ng-click="goBackClick()">
					<i class="arrow_border_icon arrow_left"></i><span>返回</span>
				</a>
			</div>
			<div class="navbar-title navbar-center" style="width:75%;">
				<span class="ng-binding" ng-bind="pageTitle">认证支付(${paymentName})</span>
			</div>
			<!--<div class="navbar-right">
				<a class="support-bank" ui-sref="suppotBankList" rel="支持银行">支持银行</a>
			</div>-->
		</div>
	</div>
	<div class="cashier-body contain clearfix">
		<div class="cashier-info">
			<span class="info_bank bankIcon bankIcon-large ${bankEnName!}" id="order-icon"></span> 
			<span class="info_card">${bankName}(尾号：${dTailCardNo})</span><br>
			<span class="info_limit">
				单笔限额：<span id="oncelimit">${singleQuota!}</span>&nbsp;&nbsp;单日限额 ：<span id="daylimit">${dayQuota!}</span>&nbsp;&nbsp;单月限额：<span id="monthlimit">${monthQuota!}</span>
			</span>
			<span class="info-money">
				<span class="pc-show" style="display:none">支付</span>
				<span class="h5-show" style="display:none">支付金额(元)</span>
				<span class="info-totolmoney">${displayAmount!}</span>
				<span class="pc-show" style="display:none">元</span>
			</span>
		</div>
		<!--<div class="cashier-limit"></div>-->
		<div class=" cashier-form">
			<form id="quickform" action="#" method="post">
				<input name="payOrderId" type="hidden" value="${payOrderId}"> 
				<input name="merchantCode" type="hidden" value="${merchantCode}">
				<input name="paymentCode" type="hidden" value="${paymentCode}">
				<input name="sign" type="hidden" value="${sign}">
				<input id="token" name="token" type="hidden"> 
				<input id="serialNo" name="serialNo" type="hidden"> 
				<input id="formToken" name="formToken" type="hidden" value="${formToken}">

				<div class="form_item clearfix">
					<label class="form_label">姓名：</label> <span class="label_text">${dName}</span>
				</div>
				<div class="form_item clearfix" id="idno_div">
					<label class="form_label">身份证号：</label> <span class="label_text">${dIdNo}</span>
				</div>
				<div class="form_item clearfix" id="cvv_div">
					<label class="form_label">银行卡号：</label> <span class="label_text">${dCardNo}</span>
				</div>
				<#if isPhone>
				<div class="form_item code clearfix item_phone" id="mob_div">
					<label class="form_label"><label>*</label>预留手机：</label> 
					<input class="item_text required phonenumber" id="phone" name="phone" type="text" maxlength="13" mtestmsg="手机号码不能为空" autocomplete="off" placeholder="银行预留的手机号码" value="${phone!}"> 
					<span class="err_tips" id="mob_tip" style="display: none">请输入银行预留手机号</span>
					<span class="form-error-tip"></span>
				</div>
				</#if>
				
				<div class="form_item code clearfix item_verify">
					<label class="form_label"><label>*</label>验证码：</label>
					<input class="item_text" id="validCode" name="validCode" type="text" autocomplete="off" placeholder="验证码"> 
					<!--<input class="veri_btn" id="getValidCode" type="button" value="获取"> -->
					<button class="phone-code veri_btn" id="getValidCode">
						<span class="inner-loading"><img src="../../resources/images/loading.gif" alt="loading"></span>
						<span class="inner-text">获取</span>
					</button>
					<span class="form-error-tip"></span>
				</div>
				<!--<input class="form_btn btn-loading" id="loadingBtn" type="button" value="正在支付" style="display: none">-->
				<!--<span class="inner-loading"><img src="../../resources/images/loading.gif" alt="loading"></span>-->
				<!--<input class="form_btn sub-btn " id="btnPurchase" type="button" value="确认支付" style="margin-left: 0;"> -->
				<a class="form_btn sub-btn" id="btnPurchase" href="javascript:void(0)"><span class="inner-loading"><img src="../../resources/images/loading.gif" alt="loading"></span>确认支付</a>
				<span class="form-error-tip form_btn-tip"></span>
			</form>
		</div>
		<br>
		<div style="display: none;">
			<form id="form2" method="post"></form>
		</div>
		<div class=" cashier-tips">
			<strong>温馨提示</strong>
			<p>
				1.手机号码需为绑定银行卡的银行预留手机号。 <br>
				2.如您忘记当前银行卡在银行预留的手机号码可拨打银行客户热线查看或修改预留手机号。 <br>
				3.若无法收到手机短信验证码请确认您当前使用的手机号码和该银行卡在银行预留的手机号码一致。 <br>
			</p>
		</div>
	</div>
	<script src="../../resources/js/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="../../resources/js/common.js?v=2" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {			
			$('input[type="text"]').blur(function(){
				var textValue  = $.trim($(this).val());
				$(this).val(textValue);
			});
			
			$('.btn-back').click(function(){
				event.preventDefault();
				if($('.h5-limitTable').css('display')==='block'){
					$('.h5-limitTable').hide();
					return false;
				}else{
					history.go(-1);
				}
			});
			
			if(util.isMobile){
				$('.h5-show').show();
				$('.pc-show').hide();
			}else{
				$('.pc-show').show();
				$('.h5-show').hide();
			}
			var countDownLeft = util.getCookie('counterDown')
			if(countDownLeft){
				var current = new Date();
				setCountDown(parseInt((countDownLeft-current.getTime())/1000,10));
			}			
			function setCountDown(coutdown){
				if(!coutdown){					
					var exp = new Date();
					exp.setTime(exp.getTime() + 3 * 60 * 1000);
					util.setCookie('counterDown',exp.getTime(),'',2);
				}
				coutdown = coutdown||180;
				$('#getValidCode').attr('disabled','disabled').addClass('btn-disabled');
				var timer = setInterval(function(){					
					if(coutdown<=0){
						$('#getValidCode').removeAttr('disabled').removeClass('btn-disabled').find('.inner-text').text('获取');
						clearInterval(timer);
						return;
					}
					$('#getValidCode').find('.inner-text').text(coutdown);
					coutdown--;
				},1000)
			}
			
			$('#getValidCode').click(function(event) {
				event.preventDefault();
				if($(this).hasClass('busy')){
					return;
				}
				var $phone = $('#phone');
				if($phone.length===1&&!/^(13|15|18|17|14)[0-9]{9}$/.test($phone.val())){
					util.showErrMsg('请输入正确的手机号码');
					return;
				}

				$(this).addClass('busy');
				$.ajax({
					url : "${ctx}/api/pay/send_verify",
					data : $("#quickform").serialize(),
					dataType: 'Json',
					type : "POST",
					success : function(data) {//ajax返回的数据
						if(data.code == 0){
							// util.showMsg("获取短信成功")
							setCountDown();
							$("#token").val(data.content.token);
							$("#serialNo").val(data.content.serialNo);
							$("#formToken").val(data.content.formToken);
						}else{
							util.showErrMsg(data.display)
						}
					
						$('#getValidCode').removeClass('busy');
					},
					error: function() {
						util.showErrMsg('网络异常，请稍后重试');
						$('#getValidCode').removeClass('busy');
					}
				}).always(function(){
					$('#getValidCode').removeClass('busy');
				});
			});
			
			
			$('#btnPurchase').click(function() {
				if($(this).hasClass('busy')){
					return;
				}
				var $phone = $('#phone');
				var $validCode = $('#validCode');
				if($phone.length===1&&!/^(13|15|18|17|14)[0-9]{9}$/.test($phone.val())){
					util.showErrMsg('请输入正确的手机号码');
					return 
				}
				if(!$validCode.val()){
					util.showErrMsg('手机验证码不能为空');
					return 
				}
				$(this).addClass('busy');
				$.ajax({
					url : "${ctx}/api/pay/purchase",
					data : $("#quickform").serialize(),
					dataType: 'Json',
					type : "POST",
					success : function(data) {//ajax返回的数据						
						if(data.code == 0 || data.code == 500211 || data.code == 500210){
							//成功跳转到过渡页面
							util.showSuccessTip(data.display);
							$("#form2").attr("action",data.content.url);
							//解析返回参数
							$.each(data.content.form,function(name,value){
								var input ="<input type='hidden' name='"+name+"' value='"+value+"' >"; 
								$("#form2").append(input);
							});
							setTimeout(function(){
								$("#form2").submit();
							},2000)
						}else{
							util.showErrMsg(data.display)
						}
						$("#formToken").val(data.content.formToken);
						$('#btnPurchase').removeClass('busy');
					},
					error: function() {
						//$("#formToken").val(data.content.formToken);
						util.showErrMsg('网络异常，请稍后重试');
						$('#btnPurchase').removeClass('busy');
					}
				}).always(function(){
					$('#btnPurchase').removeClass('busy');
				});
			});

		});
	</script>
</body>
</html>